<!-- <div *ngIf="!alarmType" class="alarm_item_dt">
    <div class="alarm-item-new" *ngFor="let alarmData of alarmDatas, let i = index"
        (click)="show(alarmData)">
        <div class='tri' *ngIf='alarmData.isMy'></div>

        <div class='left' style='flex:1'>
            <div class="alarm-item-top">
                <p class="alarm-title" [class.break]="alarmData.alarmLevel === 3">
                    {{ alarmData.areaName + ' ' +alarmData.deviceName }}
                    <span class="orangeColor state"
                        *ngIf="!alarmData.isRestore  && alarmData.procState!=0">未恢复</span>
                    <span class="greenColor state" *ngIf="alarmData.isRestore">已恢复</span>
                </p>
            </div>

            <div class="alarm-item-center">
                <p class="alarm-content">
                    {{ alarmData.alarmTypeName}}
                    <span>:</span>
                    {{ alarmData.alarmValue | roundAndTruncate:alarmData.roundCount:alarmData.isTruncate }}{{ alarmData.unit }}
                    <img src="./assets/imgs/alarmVideo.png" *ngIf='alarmData.VideoUrl'
                        (click)="toVideo(alarmData);$event.stopPropagation();">
                </p>
            </div>

        </div>

        <div class='right' style='padding-right: 10px;padding-left: 10px;min-height: 40px'>
            <div class="alarm-item-top">
                <p class="alarm-time">{{ alarmData.alarmTime | DateFormat }}</p>
            </div>
            <div class='alarm-item-center'>
                <p class="alarm-recovery-time">{{ alarmData.restoreTime | DateFormat}}</p>
            </div>
            <div class='alarm-item-bottom'>
                <p>{{ taskState[alarmData.procState] }}</p>
            </div>
        </div>

    </div>
</div> -->

<div class="list-box" [style.border]="border?'none':''" *ngFor="let item of alarmDatas" (click)="show(item)">
    <div class="list-box-left">
        <div [style.color]="item.alarmLevel===1 ? '#222' :item.alarmLevel===2? '#FF8B02':'#FF1919'">
            <span class="list-Name">{{item.name}}</span>
            <span class="list-Id"> {{item.id}} </span>
            <div *ngIf="item.listType!=='未处理'" class="list-type" [ngStyle]="{
                    'color':  item.listType==='未恢复'? '#FF8B02' : '#25990E'
                }">
                {{item.listType}}
            </div>
        </div>
        <div>
            <span class="list-alarmType">{{item.alarmTypeName}}：</span>
            <span class="list-alarmReason">{{item.alarmReason}}</span>
            <span><img *ngIf="item && item.urls && item.urls[0]" style="width: 20px;vertical-align: middle;margin:-2px 0 0 5px;" src="./assets/imgs/alarmVideo.png" (click)="toVideo(item);$event.stopPropagation();"></span>
        </div>
    </div>
    <div class="list-box-right">
        <div class="list-alarmTime">{{item.alarmTime | DateFormat}}</div>
        <div *ngIf="item.listType==='已恢复'" class="list-finTime">{{item.restoreTime | DateFormat}}
        </div>
        <div class="list-handleType">{{item.handleType}}</div>
    </div>
</div>